<template>
  <div id="diagram-container" :class="[isPanelShow?'panel-height':'title-height']">
    <div class="box-title">
      <div class="provinceControl" :class="[isprovinceshow?'active':'normal']">
        <div class="checked" style="margin-left: 330px;">
          <input class='tgl tgl-light' id='cb2' type='checkbox' v-model="isprovinceshow">
          <label class='tgl-btn' for='cb2'></label>
          <span class="cityText" style="position: relative;top: -2px;">显示各行政区曲线</span>
        </div>
      </div>
      <div class="cityPanel" :class="[iscityshow?'active':'normal']">
        <div class="checked">
          <input class='tgl tgl-light' id='cb1' type='checkbox' v-model="iscityshow">
          <label class='tgl-btn' for='cb1'></label>
          <span class="cityText" style="position: relative;top: -2px;">城市对比</span>
        </div>
        <div class="cityRow">
          <span  :class="[iscityshow?'textactive':'textnormal']">城市1：</span>
          <span @click="clickFirstCity" style="cursor: pointer;">{{firstCityName}}</span>
          <city-choose v-show="firstCity" @getCityCode="getfirstCity" @closePanel="closeFirst"></city-choose>
        </div>
        <div class="cityRow">
          <span :class="[iscityshow?'textactive':'textnormal']">城市2：</span>
          <span @click="clickSecondCity" style="cursor: pointer;">{{secondCityName}}</span>
          <city-choose v-show="secondCity" @getCityCode="getsecondCity" @closePanel="closeSecond"></city-choose>
        </div>
      </div>
      <div class="flex-tip">
        <span>交通拥堵指数数据分析面板</span>
        <span>更新时间：<span>{{updataTime}}</span></span>
      </div>
      <span :class="[isPanelShow?'down':'up','drop-icon']" @click="toggleDiaPanel"></span>
    </div>
    <transition name="fade">
      <div class="box" v-show="isPanelShow">
        <diagram-left></diagram-left>
        <diagram-right></diagram-right>
      </div>
    </transition>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../util/event-bus'
  import DiagramLeft from "./views/DiagramLeft";
  import DiagramRight from "./views/DiagramRight";
  import CityChoose from "./views/CityChoose"

  export default {
    name: 'DiagramContainer',
    data () {
      return {
        isprovinceshow:false,
        iscityshow:false,
        firstCity:false,
        secondCity:false,
        firstCityName:'成都市',
        secondCityName:'大连市',
        updataTime:'',

      }
    },
    mounted(){
      this.updataTime = this.formatTime(this.cur_timestamp);
       eventBus.$on('setGlobalInterval',() => {
         this.updataTime = this.formatTime(this.cur_timestamp);
      });
    },
    computed: {
      ...mapGetters(['cur_state','cur_city','cur_index_type','cur_timestamp','isPanelShow','isProvinceshow','isCityshow'])
    },
    components: {CityChoose, DiagramRight, DiagramLeft},
    methods: {
      ...mapMutations(['updatePanelState','updateProvinceState','updateCityState','upfirstCityCode','upsecondCityCode']),
      formatTime(time){
        let year = time.slice(0,4);
        let month = time.slice(4,6);
        let day = time.slice(6,8);
        let hour = time.slice(8,10);
        let min = time.slice(10,12);

        let date =year+'-'+month+'-'+day+' '+hour+':'+min;
        return date;
      },
      toggleDiaPanel(){
        let isShow = !this.isPanelShow;
        this.updatePanelState(isShow);
      },
      getfirstCity(city){
        this.firstCityName = city.name;
        this.firstCity = false;
        this.upfirstCityCode(city.code);
      },
      getsecondCity(city){
        this.secondCityName = city.name;
        this.secondCity = false;
        this.upsecondCityCode(city.code);
      },
      clickFirstCity(){
        if(this.secondCity == true){
          this.secondCity = false;
        }
        this.firstCity = !this.firstCity;
      },
      clickSecondCity(){
        if(this.firstCity == true){
          this.firstCity = false;
        }
        this.secondCity = !this.secondCity;
      },
      closeFirst(){
        this.firstCity = false;
      },
      closeSecond(){
        this.secondCity = false;
      }
    },
    watch:{
      isprovinceshow :function(val, oldVal){
        this.updateProvinceState(val);
      },
      iscityshow:function(val, oldVal){
         this.updateCityState(val);
      },
      'isProvinceshow':function(val, oldVal){
        this.isprovinceshow = val;
      },
      'isCityshow':function(val, oldVal){
        this.iscityshow = val;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../common/common.scss";
  @import "../common/checked.scss";

  #diagram-container {
    &.panel-height{
      height:274px;
    }
    &.title-height{
      height: 26px;
    }
    .box-title {
      width: 100%;
      height: 26px;
      background-color: #000000;
      box-shadow: $shadow-title;
      font-size: $font-small;
      white-space:nowrap;
      .drop-icon {
        float: right;
        position: fixed;
        right: 0;
        width: 26px;
        height: 26px;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.5);
        background-repeat: no-repeat;
        background-position: center;
        &.down{
          background-image: url("../../static/images/drop-icon.png");
          /*transition: background 0.5s ease-in 0.3s;*/
        }
        &.up{
          background-image: url("../../static/images/up-icon.png");
          /*transition: background 0.5s ease-in 0.3s;*/
        }
      }
      .flex-tip{
        float: right;
        width: calc(100% - 520px);
        display: flex;
        span{
          flex-grow: 1;
          text-align: right;
          line-height: 26px;
          span{
            margin-right: 30px;
          }
        }
      }
    }
    .box {
      height: calc(100% - 26px);
      background-color: #1e1e1e;
      box-shadow: $shadow-title;
    }
    .provinceControl{
      display: inline-block;
      width: 484px;
      height: 26px;
      border-radius: 0 25px 25px 0;
    }
    .cityPanel{
      display: inline-block;
      width: 314px;
      height: 26px;
      border-radius: 0 25px 25px 0;
      position: absolute;
      left: 600px;
    }
    .checked{
      display: inline-block;
      margin-top: 6px;
      margin-left: 10px;
    }
    .cityRow{
      display: inline-block;
      position: relative;
      top: -2px;
      margin-left: 20px;
    }
    .normal{
      background-color:white;
      color: #000000;
    }
    .active{
      background-color:#ff003b;
      color: white;
    }
    .textnormal{
      color: #585858;
    }
    .textactive{
      color: white;
    }
    .tgl-light + .tgl-btn {
      background: #525252;
    }
    .tgl:checked + .tgl-btn:after {
      left: 50%;
      background: #ff003b;
    }
    .tgl-light:checked + .tgl-btn {
      background: #ffffff;
    }
  }
</style>
